<template>
	<view class="flex flex-col flex-between" :prop="flag" :change:prop="mSticky.doSticky">
		<slot></slot>
	</view>
</template>
<script module="mSticky" lang="renderjs">
	import Sticky from './js/sticky.js'
	export default {
		data() {
			return {
				sticky: null
			}
		},
		methods: {
			doSticky(value, oldValue, ownerInstance, instance) {
				if (!value) {
					this.sticky && this.sticky.doUnbind();
				} else {
					this.$el && (this.sticky = new Sticky(this.$el, this, value.top, value.containerCls).doBind());
				}
			}
		},
		mounted() {}
	}
</script>
<script>
	export default {
		props: {
			top: {
				type: [Number, String],
				default: 168,
			},
			containerCls: {
				type: String,
				default: ''
			}
		},
		name: 'mSticky',
		data() {
			return {
				flag: false,
			}
		},
		methods: {},
		async mounted() {
			await this.$nextTick()
			this.flag = {
				containerCls: this.containerCls,
				top: this.top
			}
		},
		beforeDestroy() {
			this.flag = false;
		}
	}
</script>